<script>

export default {
  name: 'ZhuYe1',
  data () {
    return {
      shu1: [1, 2, 2, 1, 2, 4, 4, 3, 1, 1, 3, 4],
      bowensj: []
      // wzcount: '',
      // zuihou: ''
    }
  },
  async created () {
    this.bowensj = await this.$store.dispatch('getBowen')
    // this.wzcount = this.bowensj.length
    // this.zuihou = this.bowensj[-1].id
  }
}
</script>

<template>
  <div style="height: auto">
    <div class="bj"></div>
    <el-row style="display: flex; justify-content: center;max-width: 100%">
      <el-col class="mokuai1 hidden-sm-and-down">
        <div class="mk1">
          <side-card></side-card>
          <side-card2 class="sc2">
            <i class="el-icon-data-board">公 告</i>
            <p>因为还要忙毕业设计所以该项目暂且搁置，功能日后再完善</p>
          </side-card2>
          <side-card2 class="sc2">
            <i class="el-icon-time">最 近 更 新</i>
            <div v-for="item in bowensj.slice(0,6)" :key="item.id">
              <hr>
              <latest-card :shu="item"></latest-card>
            </div>
          </side-card2>
        </div>
      </el-col>
      <el-col :xs="24" class="mokuai2">
        <e-music1 tabPosition="top" :shu1="shu1"></e-music1>
        <e-tab tabPosition="right" class="hidden-sm-and-down">
        </e-tab>
        <e-tab tabPosition="top" class="hidden-md-and-up">
        </e-tab>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
$textcol: white;
.bj {
  height: 50px;
  transition: all .5s;
  @media (max-width: 992px) {
    height: 0;
  }
}
.mokuai1 {
  padding: 10px;
  height: 100%;
  display: flex;
  //flex-direction: column;
  //align-items: self-end;
  justify-content: flex-end;
  max-width: 400px;

  .mk1 {
    width: 400px;

    .sc2 {
      color: $textcol;
      font-size: 13px;
    }
  }

  @media (max-width: 1400px) {
    width: 28vw;
  };
}

.mokuai2 {
  max-width: 1000px;
  padding: 10px;
  //background: black;
  //display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 992px) {
  .mokuai2 {
    width: 98vw;
  }
}
</style>
